<template>
    <div class="container container-index">
        <a-spin tip="Loading..." :spinning="loading">
            <!-- <div class="index-top">
                <a-carousel autoplay arrows draggable>
                    <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                        <a-icon type="left-circle" />
                    </div>
                    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                        <a-icon type="right-circle" />
                    </div>
                    <div class="index-bgbox" v-for="item in bannerList">
                        <img class="top-bg" :src="item" />

                    </div>
                </a-carousel>
                <div class="top-panel">
                    <div class="top-title">中医药科技成果转化“1+N”</div>
                    <div class="top-tips">聚焦专业细分产业领域为聚焦，围绕中医药战略性新兴产业</div>
                    <div class="top-input-box">
                        <input class="top-input" type="text" placeholder="输入您想查找的成果和需求…" v-model="pageParams.keywords">
                        <a-icon class="top-input-ico" type="search" @click="cliclSearch" />
                    </div>

                </div>
            </div> -->

            <div class="page-top">
                <a-carousel autoplay arrows draggable :autoplaySpeed="5000">
                    <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
                        <a-icon type="left-circle" />
                    </div>
                    <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
                        <a-icon type="right-circle" />
                    </div>
                    <div class="index-bgbox">
                        <img class="page-top-bg" :src="require('@/assets/img/resource-bg.png')" />
                    </div>
                    <div class="index-bgbox">
                        <img class="page-top-bg" :src="require('@/assets/img/banner-bg.png')" />
                        <DomainVue :pageData="otherPageData.specialistTerritories" v-if="otherPageData.specialistTerritories" />
                    </div>
                    <div class="index-bgbox">
                        
                        <img class="page-top-bg" :src="require('@/assets/img/banner-bg.png')" />
                        <CompletionRate :pageData="otherPageData.percentageComplete" v-if="otherPageData.percentageComplete" />

                    </div>
                </a-carousel>

                <div class="page-top-panel">
                    <div class="page-top-title">中医药科技成果转化“1+N”</div>
                    <div class="top-tips">聚焦专业细分产业领域为聚焦，围绕中医药战略性新兴产业</div>
                    <div class="top-input-box">
                        <input class="top-input" v-model="pageParams.keywords" type="text" placeholder="输入您想查找的成果和需求…"
                            @keyup.enter="cliclSearch">
                        <a-icon class="top-input-ico" type="search" @click="cliclSearch" />
                        <div class="top-input-AI" @click="showAiVisible=true">
                            <img class="input-ai-img" :src="require('@/assets/logo/deepseek.webp')" />
                            <span>AI搜索</span>
                            <i class="iconfont">&#xeb08;</i>
                        </div>
                    </div>

                </div>
            </div>

            <div class="search-list" v-if="showSearch">

                <div class="page-content">
                    <div style="font-size:16px;margin-bottom:20px">
                        搜索结果：相关结果约{{total}}条
                    </div>
                    <div class="type-panel">
                        <span class="type-list" :class="pageParams.type===1&&'type-list-sel'" @click="pageTypeChange(1)">需求</span>
                        <span class="type-list" :class="pageParams.type===2&&'type-list-sel'" @click="pageTypeChange(2)">成果</span>
                        <span class="type-list" :class="pageParams.type===3&&'type-list-sel'" @click="pageTypeChange(3)">专家</span>
                        <span class="type-list" :class="pageParams.type===4&&'type-list-sel'"
                            @click="pageTypeChange(4)">专家团队</span>
                        <span class="type-list" :class="pageParams.type===5&&'type-list-sel'"
                            @click="pageTypeChange(5)">技术经纪人</span>
                    </div>
                    <div v-if="pageList.length>0">
                        <template v-for="item in pageList">
                            <DemandPageListVue v-if="pageParams.type===1" @clickList="jumpDemand(item)" :listInfo="item" />
                            <AchievementPageListVue v-else-if="pageParams.type===2" @clickList="jumpAch(item)" :listInfo="item" />
                            <TalentPageListVue v-else :listInfo="item" :pageType="typeObj[pageParams.type]" />
                        </template>
                    </div>
                    <div class="page-content" v-else>
                        <div class="list-null">
                            <div class="iconfont">&#xe642;</div>
                            <div>暂无数据</div>
                        </div>

                    </div>
                    <div style="text-align:right">
                        <a-pagination v-model="pageNum" :pageSize="pageSize" :total="total" show-less-items
                            @change="pageChange" />
                    </div>

                </div>

            </div>
            <div>
                <MapChartVue :otherPageData="otherPageData" />
            </div>
            <div class="index-bottom">
                <div class="bottom-list" v-for="item in bottomList" @click="jump(item.url)">
                    <img class="bottom-bg" :src="require('@/assets/img/'+item.img)" />
                    <div class="bottom-panel">
                        <div class="bottom-title">{{item.title}}</div>
                        <div class="bottom-tips">{{item.tips}}</div>
                    </div>
                </div>
            </div>
        </a-spin>

        <AiWin @closeModal="showAiVisible=false" :visible="showAiVisible" />
    </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TalentPageListVue from "@/views/talent/components/pageList.vue";
import DemandPageListVue from "@/views/demand/components/pageList.vue";
import AchievementPageListVue from "@/views/achievement/components/pageList.vue";
import MapChartVue from "@/components/mapChart.vue";
import DomainVue from "@/components/domain.vue";
import CompletionRate from "@/components/completionRate.vue";
import AiWin from "@/components/aiWin.vue";
import api from "@/api/api";
@Component({
    name: "dom",
    components: { TalentPageListVue, DemandPageListVue, AchievementPageListVue, MapChartVue, AiWin, DomainVue, CompletionRate },
})
export default class index extends Vue {
    showAiVisible = false;
    showSearch = false;
    pageParams = {
        type: 1,
        keywords: "",
    };
    bottomList = [
        { title: "找需求", tips: "精准查找需求", img: "index-1.png", url: "/demand" },
        { title: "找成果", tips: "查找各种成果", img: "index-2.png", url: "/achievement" },
        { title: "找专家", tips: "各领域专家聚合", img: "index-3.png", url: "/talent" },
        { title: "找技术经纪人", tips: "专业人员提供帮助", img: "index-4.png", url: "/talent?type=技术经纪人" },
        { title: "找服务", tips: "全方面专业服务", img: "index-5.png", url: "/resource" },
    ];

    pageNum = 1;
    total = 0;
    loading = false;
    pageSize = 9;
    pageList = [];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            let res;
            if (this.pageParams.type === 1) {
                // 需求
                res = await api.getDemandList({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    demandName: this.pageParams.keywords,
                });
            } else if (this.pageParams.type === 2) {
                //成果
                res = await api.getActList({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    achievementName: this.pageParams.keywords,
                });
            } else if (this.pageParams.type === 3) {
                //专家
                res = await api.findTalentPoolMessage({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.pageParams.keywords,
                    userType: "专家",
                    hasTechnicalRepresentative: null,
                });
            } else if (this.pageParams.type === 4) {
                //专家团队
                res = await api.findTalentPoolMessage({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.pageParams.keywords,
                    userType: "专家团队",
                    hasTechnicalRepresentative: null,
                });
            } else if (this.pageParams.type === 5) {
                //技术经纪人
                res = await api.findTalentPoolMessage({
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.pageParams.keywords,
                    userType: "",
                    hasTechnicalRepresentative: 1,
                });
            }

            this.pageList = res.data?.rows || [];
            this.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    otherPageData = {};
    async getData() {
        this.loading = true;
        try {
            const res = await api.findBigScreenData({});
            this.otherPageData = res.data;
        } finally {
            this.loading = false;
        }
    }
    cliclSearch() {
        this.showSearch = true;
        this.resetList();
    }
    resetList() {
        this.pageNum = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pageSize = pageSize;
        this.pageNum = page;
        this.getList();
    }
    pageTypeChange(type) {
        this.pageParams.type = type;
        this.resetList();
    }
    mounted() {
        // console.info(123);
        this.getBanner();
        this.getData();
    }

    bannerList = [""];
    async getBanner() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getBannerList({
                pageTable: "首页banner",
            });
            const rows = res.data?.rows || [];
            const pictures = rows[0]?.pictures || "";
            this.bannerList = pictures ? JSON.parse(pictures) : [""];
        } finally {
            this.loading = false;
        }
    }
    jumpDemand(item) {
        const route = this.$router.resolve({
            name: "demandDetail",
            // 如果需要在新窗口中打开
            replace: true,
            query: { id: item.id },
        });
        // 在新窗口中打开路由
        window.open(route.href, "_blank");
    }

    typeObj = {
        3: "专家",
        4: "专家团队",
        5: "",
    };
    // jumpTalent(item) {
    //     const route = this.$router.resolve({
    //         name: "talentDetail",
    //         // 如果需要在新窗口中打开
    //         replace: true,
    //         query: { id: item.id },
    //     });
    //     // 在新窗口中打开路由

    //     window.open(route.href, "_blank");
    // }
    jumpAch(item) {
        const route = this.$router.resolve({
            name: "achievementDetail",
            // 如果需要在新窗口中打开
            replace: true,
            query: { id: item.id },
        });
        // 在新窗口中打开路由
        window.open(route.href, "_blank");
    }
    jump(url: string) {
        this.$router.push(url);
    }
}
</script>

<style lang="scss">
@keyframes bannerAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes bottomAnimation1 {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes bottomAnimation2 {
    0% {
        transform: scale(1);
    }
    20% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    40% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes bottomAnimation3 {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes bottomAnimation4 {
    0% {
        transform: scale(1);
    }
    60% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}
@keyframes bottomAnimation5 {
    0% {
        transform: scale(1);
    }
    80% {
        transform: scale(1);
    }
    90% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.container-index {
    .page-top {
        position: relative;
    }
    .index-bgbox {
        min-height: 330px;
        overflow: hidden;
        position: relative;
    }
    .page-top-bg {
        width: 100%;
        transform-origin: 100%;
        //animation: bannerAnimation 10s linear infinite;
    }
    .page-top-panel {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        padding-top: 8%;
        padding-left: 10%;
    }
    .page-top-title {
        font-weight: bold;
        font-size: 45px;
        color: #132042;
    }
    .top-tips {
        font-weight: bold;
        font-size: 30px;
        color: #999;
    }

    .top-input-box {
        width: 620px;
        box-shadow: 0px 10px 12px 0px rgba(47, 101, 243, 0.2);
        height: 60px;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: 100px;
        margin-top: 30px;
        position: relative;
    }
    .top-input {
        font-weight: bold;
        font-size: 18px;
        height: 100%;
        border: unset;
        background-color: transparent;
        padding: 0 40px;
        flex-grow: 1;
        outline: unset;
    }
    .top-input-ico {
        display: block;
        width: 80px;
        background: #2f65f3;
        color: #ffffff;
        height: 100%;
        font-size: 30px;
        line-height: 65px;
        cursor: pointer;
        font-weight: bold;
        border-radius: 0 100px 100px 0;
    }
    .top-input-AI {
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-top: 10px;
        position: absolute;
        right: -200px;
        top: 5px;
        padding: 5px 10px;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.8);

        .iconfont {
            font-size: 16px;
            font-weight: lighter;
            display: inline-block;
            background-color: #d2daff;
            height: 25px;
            width: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 30px;
            margin-left: 4px;
        }
    }
    .input-ai-img {
        width: 100px;
        display: inline-block;
        margin-right: 5px;
    }

    .index-bottom {
        display: flex;
        justify-content: center;
        margin: 60px 0 80px 0;
    }
    .bottom-list {
        position: relative;
        margin-right: 18px;
        cursor: pointer;
        overflow: hidden;
        transition: all 0.3s;
    }
    .bottom-list:hover {
        box-shadow: 0 0 5px 2px rgba(37, 137, 255, 0.5);
    }

    .bottom-list:last-child {
        margin-right: 0;
    }
    .bottom-bg {
        width: 250px;
    }
    .bottom-list:nth-child(1) .bottom-bg {
        animation: bottomAnimation1 20s linear infinite;
    }
    .bottom-list:nth-child(2) .bottom-bg {
        animation: bottomAnimation2 20s linear infinite;
    }
    .bottom-list:nth-child(3) .bottom-bg {
        animation: bottomAnimation3 20s linear infinite;
    }
    .bottom-list:nth-child(4) .bottom-bg {
        animation: bottomAnimation4 20s linear infinite;
    }
    .bottom-list:nth-child(5) .bottom-bg {
        animation: bottomAnimation5 20s linear infinite;
    }

    .bottom-panel {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 24px 0 0 24px;
    }
    .bottom-title {
        font-weight: bold;
        font-size: 30px;
        color: #102040;
    }
    .bottom-tips {
        font-size: 24px;
        color: #333333;
    }

    .page-content {
        padding: 50px 0;
        display: block;
        margin: 0 auto;
        width: 1350px;
    }
    .type-panel {
        border-bottom: solid 1px #eee;
        background-color: #fff;
        margin-bottom: 20px;
        border-radius: 4px;
    }
    .type-list {
        font-size: 18px;
        border-bottom: solid 3px transparent;
        cursor: pointer;
        margin-right: 20px;
        font-weight: bold;
        display: inline-block;
        padding: 2px 0;
        color: #333;
        width: 120px;
        text-align: center;
        padding: 10px 0;
    }
    .type-list-sel {
        border-bottom: solid 3px #2f65f3;
        color: #2f65f3;
    }
}
</style>
